<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫评论页面</title>
    <style>
        body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; margin: 0; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        h1 { text-align: center; }
        form { margin-top: 20px; }
        label { display: block; margin-bottom: 5px; }
        input, textarea { width: 100%; padding: 8px; resize: vertical; }
        button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        .comment-list { margin-top: 20px; }
        .comment { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>发表您的评论</h1>
        <form id="commentForm">
            <label for="name">您的名字：</label>
            <input type="text" id="name" name="name" required>

            <label for="rating">评分：</label>
            <select id="rating" name="rating" required>
                <option value="">请选择评分</option>
                <option value="1">1 星</option>
                <option value="2">2 星</option>
                <option value="3">3 星</option>
                <option value="4">4 星</option>
                <option value="5">5 星</option>
            </select>

            <label for="comment">您的评论：</label>
            <textarea id="comment" name="comment" required></textarea>

            <button type="submit">提交评论</button>
        </form>

        <div id="commentsList" class="comment-list">
        </div>
    </div>
    <script>
        document.getElementById('commentForm').addEventListener('submit', function(event) {
            event.preventDefault(); 
            const name = document.getElementById('name').value;
            const rating = document.getElementById('rating').value;
            const comment = document.getElementById('comment').value;
            const commentElement = document.createElement('div');
            commentElement.classList.add('comment');
            commentElement.innerHTML = `
                <h2>${name}</h2>
                <p>评分： ${rating} 星</p>
                <p>${comment}</p>
            `;
            document.getElementById('commentsList').appendChild(commentElement);
            document.getElementById('commentForm').reset();
        });
    </script>
</body>
</html>